<template>
    <view class="cu-list grid" :class="['col-' + col, border ? '' : 'no-border']">
        <view :class="[select_item_key_list[key]==true?'bg-nddyny':'']" @tap="_tap($event, item, key, index)" class="cu-item"
            v-for="(item,key,index) in list" :key="index" v-if="index < col * row">
            <view v-if="item.icon" :class="['cuIcon-' + item.icon, 'text-' + item.color]" class="margin-bottom-10"></view>
            <view :class="class_name">{{item.name}}</view>
            <view v-if="value_info && not_value_floor" :class="class_value">{{value_info[key]}}</view>
            <view v-if="value_info && !not_value_floor" :class="class_value">{{value_info[key] | floor}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        props: [
            'row', 'col', 'border', 'list', 'tap', 'uri',
            'class_name', 'class_value',
            'value_info', 'not_value_floor',
            'can_select_item', 'data'
        ],
        data() {
            return {
                select_item_key_list: {}
            }
        },
        methods: {
            _tap(e, item, key, index) {
                if (this.can_select_item) {
                    this.$set(this.select_item_key_list, key, this.select_item_key_list[key] ?
                        !this.select_item_key_list[key] :
                        true);
                    this.$set(this.data.form, key, this.data.form[key]==1?0:1)
                    this.$emit('update:data', this.data);
                }
                if (this.tap) {
                    this.tap(e, item, key, index);
                }
                if (this.uri) {
                    this.$store.commit('userNavTo', this.uri);
                } else if (item.uri) {
                    this.$store.commit('userNavTo', item.uri);
                }
            },
            clearSelectItemKeyList() {
                this.select_item_key_list = {};
            }
        }
    }
</script>
